<template>
  <BoTable
    :columns="columns"
    :request="_request"
    :row-selection="rowSelection"
    row-key="contractId"
    ref="tableRef"
  >
    <template #leftContainer>
      <div class="mr-4 w-48 border-r border-[rgba(255,255,255,.3)]">
        <div class="module-title detection">关联监测阵</div>
        <Tree
          v-if="treeData.length"
          :tree-data="treeData"
          show-icon
          default-expand-all
        >
          <template #title="scope">
            <span @click="() => handleSelectStructure(scope)">{{
              scope.structureName
            }}</span>
          </template>
        </Tree>
      </div>
    </template>
  </BoTable>
</template>

<route lang="json">
{
  "name": "设备运行统计",
  "meta": { "title": "设备运行统计" }
}
</route>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { router } from '@boeyo/portal';
import { useDicts } from '@boeyo/portal';
import { BoTable, BoTableProps } from '@boeyo/ui';
import { Tree } from 'ant-design-vue';
import { deviceList, tree } from './api';

const { deviceTypeEnum } = useDicts(['device_type']);

const getTreeData = async () => {
  const res = await tree({});
  treeData.value = res.data;
};
getTreeData();
const treeData = ref([]);

const _request = async (_params) => {
  const res: any = await deviceList({ ..._params, ...params });
  res.rows = res.rows.map((item: any) => {
    item.latitude = (+item.latitude || 0).toFixed(4);
    item.longitude = (+item.longitude || 0).toFixed(4);
    return item;
  });
  return {
    rows: res.rows,
    total: res.total,
  };
};

const columns = computed<BoTableProps['columns']>(() => [
  // {
  //   title: '所属项目',
  //   dataIndex: 'project',
  //   hideInTable: true,
  // },
  {
    title: '设备厂商',
    dataIndex: 'manufacturer',
  },
  {
    title: '设备类型',
    dataIndex: 'deviceType',
    valueType: 'select',
    valueEnum: deviceTypeEnum.value,
  },
  {
    title: '设备编号',
    dataIndex: 'stationId',
  },
  {
    title: '硬件序列号',
    dataIndex: 'deviceCode',
  },
  {
    title: '软件版本',
    dataIndex: 'version',
    hideInSearch: true,
  },
  {
    title: '设备型号',
    dataIndex: 'model',
    hideInSearch: true,
  },
  {
    title: '经度',
    dataIndex: 'longitude',
    hideInSearch: true,
  },
  {
    title: '纬度',
    dataIndex: 'latitude',
    hideInSearch: true,
  },
  {
    title: '高程',
    dataIndex: 'height',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    actions: [
      {
        text: '详情',
        onClick(record) {
          router.push({
            path: '/output/run/detail',
            query: record,
          });
        },
      },
    ],
  },
]);

const selectKeys = ref<number[]>([]);
const rowSelection = computed<BoTableProps['rowSelection']>(() => {
  return {
    onChange(values) {
      selectKeys.value = values as number[];
    },
  };
});
let params: Record<string, any> = {};
const tableRef = ref();
const handleSelectStructure = (scope) => {
  if (!scope) return;
  const { monitoringType, id } = scope;
  params = {};
  switch (monitoringType) {
    case '1':
      params.netId = id;
      break;
    case '2':
      params.regionId = id;
      break;
    case '3':
      params.structureId = id;
      break;
  }
  tableRef.value.search();
};
</script>

<style scoped lang="scss">
.info {
  display: flex;
  flex-direction: column;
  text-align: center;
  div {
    margin-bottom: 10px;
  }
}

:deep(.ant-card-head-title) {
  padding-left: 10px;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-45%);
    width: 3px;
    height: 16px;
    background-color: #0085ff;
  }
}
.modal_title {
  font-weight: 700;
  font-size: 17px;
}
</style>
